<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <el-form size="mini" :inline="true">
          <el-form-item label="校区">
            <el-select v-model="address" placeholder="校区">
              <el-option label="取消选择校区" value></el-option>
              <el-option
                v-for="(v, i) in getschooladdress"
                :key="`1Makeuplessons${i}`"
                :label="v.name"
                :value="v.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="clazz" placeholder="班级">
              <el-option label="取消选择班级" value></el-option>
              <el-option
                v-for="(v, i) in getclazz"
                :key="`2Makeuplessons${i}`"
                :label="v.name"
                :value="v.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生">
            <el-input v-model="user" placeholder="学生"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <table class="table text-center">
          <thead class="thead-light">
            <tr>
              <th>选择</th>
              <th>名称</th>
              <th>班级</th>
              <th>请假时间</th>
              <th>上课内容</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v, i) in gettabledata" :key="`3Makeuplessons${i}`">
              <td>
                <input
                  v-model="checkbox"
                  type="checkbox"
                  class="form-check-input"
                  name="exampleCheck1"
                  :value="v.ID"
                />
              </td>
              <td>{{ getschoolstudentbyid(v.schoolstudentid).name }}</td>
              <th>{{ getschoolclazzbyid(v.schoolclazzschedule.schoolclazzid).name }}</th>
              <td>{{totime(v.schoolclazzschedule.starttime)}} {{v.schoolclazzschedule.schoolclasstime}}</td>
              <td>{{v.schoolclazzschedule.info}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  asynccreatschoolclazzstudentcalendar,
  asyncgetschoolclazzstudentcalendaroftype
} from "../../../../plugins/api.js";
import { mapGetters } from "vuex";
import { totime, messagesend } from "../../../utils.js";
import * as moment from "moment";
export default {
  name: "Makeuplessons",
  data() {
    return {
      tabledate: [],
      user: "",
      clazz: "",
      address: "",
      checkbox: []
    };
  },
  props: {
    submit: {
      type: Boolean,
      default: false
    },
    setaddress: {
      type: Boolean,
      default: false
    },
    setsubmit: {
      type: Function
    },
    schoolclazzscheduleid: {
      type: Number
    },
    student: {
      type: Array,
      value: () => []
    },
    schedule: {
      type: Object,
      value: () => {}
    }
  },
  async created() {
    this.tabledate = await asyncgetschoolclazzstudentcalendaroftype();
  },
  computed: {
    ...mapGetters([
      "getschoolstudent",
      "getschoolclazz",
      "getschooladdress",
      "getschoolstudentbyid",
      "getschoolclazzbyid",
      "getuser"
    ]),
    getclazz() {
      const { getschoolclazz, address } = this;
      if (address) {
        return getschoolclazz.filter(v => v.schoolclazzid == address);
      }
      return getschoolclazz;
    },
    getstudent() {
      const { user, getschoolstudent, address, student } = this;
      return getschoolstudent
        .filter(v => {
          let ad = true;
          if (address) {
            ad = v.schooladdressid == address;
          }
          const na = v.name.includes(user);
          const xa = student.find(vo => vo.ID == v.ID);
          return na && ad && !xa;
        })
        .map(v => v.ID);
    },
    gettabledata() {
      const { tabledate, clazz, schoolclazzscheduleid, getstudent } = this;
      const data = tabledate.filter(v => {
        return v.schoolclazzscheduleid != schoolclazzscheduleid;
      });
      return data.filter(v => {
        const { schoolclazzschedule } = v;
        let cl = true;
        if (clazz) {
          cl = schoolclazzschedule.schoolclazzid == clazz;
          // cl = le.find(vo => vo.ID == v.schoolclazzschedleid);
        }
        return cl && getstudent.includes(v.schoolstudentid);
      });
    }
  },
  watch: {
    async submit(v) {
      if (v) {
        await this.subform();
        await this.$store.dispatch("actionschoolstudent");
      }
    },
    async setaddress(v) {
      if (v) {
        this.tabledate = await asyncgetschoolclazzstudentcalendaroftype();
      }
    }
  },
  methods: {
    totime,
    async subform() {
      const {
        checkbox,
        setsubmit,
        schoolclazzscheduleid,
        gettabledata,
        schedule,
        getschoolstudentbyid,
        getuser
      } = this;
      for (let v of checkbox) {
        await asynccreatschoolclazzstudentcalendar({
          ID: v,
          type: "其他"
        });
        const { schoolstudentid } = gettabledata.find(vo => vo.ID == v);
        await asynccreatschoolclazzstudentcalendar({
          type: "补课",
          schoolclazzscheduleid,
          schoolstudentid: gettabledata.find(vo => vo.ID == v).schoolstudentid
        });
        const name = getschoolstudentbyid(schoolstudentid).name;
        const { info, starttime } = schedule;
        const time = moment(starttime).format("YYYY-MM-DD");
        const username = getuser.name;
        await messagesend(schoolstudentid, name, info, time, username, "补课");
      }
      setsubmit(false);
    }
  }
};
</script>